<template>
  <div id="index">
    <!-- 顶部导航 -->
    <div class="nav-bar">
      <t-navbar :fixed="false">
        <template #left>
          <span class="custom-title">Flower Buy</span>
        </template>
      </t-navbar>
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="search-input">
        <t-input placeholder="请输入关键字搜索" clearable class="input">
          <template #prefixIcon>
            <t-icon name="search" size="24"></t-icon>
          </template>
        </t-input>
      </div>
      <div class="search-btn">
        <t-icon name="service" size="24"></t-icon>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="swiper-container">
        <Carousel
          :images="[
            'https://picsum.photos/200/300?1',
            'https://picsum.photos/200/300?2',
            'https://picsum.photos/200/300?3',
          ]"
        />
      </div>
    </div>
    <!-- 宫格 -->
    <div class="grid">
      <t-grid :column="5" class="grid-demo">
        <div v-for="(item, index) in grid" :key="index">
          <t-grid-item
            :text="item.text"
            :image="item.image"
            @click="$router.push(item.path)"
          />
        </div>
      </t-grid>
    </div>
    <!-- 通知 -->
    <div class="notice">
      <div class="notice-item">
        <div class="notice-icon">官方动态</div>
        <div class="notice-text">
          <div class="not" v-for="(item, index) in notice" :key="index">
            <div class="not-left">{{ item.not }}</div>
            <div class="not-right">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
      <div class="recom-left">
        <div class="recom-left-text">
          <div class="rec-item">
            <div class="rec-text">经典推荐</div>
            <div class="rec-title">RECOMMENDED <br />CLASSIC</div>
          </div>
        </div>
        <div class="recom-left-img">
          <img src="../../../public/image/hu1.png" alt="" />
        </div>
      </div>
      <div class="recom-right">
        <div class="recom-right-text">
          <div class="recc-item">
            <div class="recc-text">自由定制</div>
            <div class="recc-title">
              FREE <br />
              CUSTOM
            </div>
          </div>
        </div>
        <div class="recom-right-img">
          <img src="../../../public/image/hu2.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 榜单 -->
    <div class="rank">
      <div class="rank-box" v-for="(item, index) in rank" :key="index">
        <div class="rank-box-top">
          <div class="rb-img">
            <img :src="item.icon" alt="" />
          </div>
          <div class="rb-text">{{ item.text }}</div>
        </div>
        <div class="rank-box-cent">{{ item.cent }}</div>
        <div class="rank-box-bottom">
          <img :src="item.img" alt="" />
        </div>
      </div>
    </div>
    <!-- 送人 -->
    <div class="send">
      <!-- 送恋人 -->
      <div class="send-left">
        <div class="sen-text">
          <div class="sen-text1">送恋人</div>
          <div class="sen-text2">SEND LOVER</div>
          <div class="sen-text3">开启你的甜蜜日记</div>
        </div>
        <div class="sen-img">
          <img src="../../../public/image/bg1.png" alt="" />
        </div>
      </div>
      <div class="send-right">
        <!-- 送长辈 -->
        <div class="send-right-top" v-for="(item, index) in son" :key="index">
          <div class="srt-left">
            <div class="srt-left-text1">{{ item.text }}</div>
            <div class="srt-left-text2">{{ item.text2 }}</div>
            <div class="srt-left-text3">{{ item.text3 }}</div>
          </div>
          <div class="srt-right">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 爆款必抢 -->
    <div class="buy">
      <div class="buy-text">
        <div class="buy-text-left">爆款必抢</div>
        <div class="buy-text-right">更多></div>
      </div>
      <!-- 商品列表 -->
      <div class="buy-list">
        <div class="buy-item" v-for="item in 8" :key="item">
          <div class="buy-item-img">
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div class="buy-item-text">
            <div class="buy-item-text1">春日特辑</div>
            <div class="buy-item-text2">
              <span>5.2k/1.0w人已抢</span><span class="bu-i">52.5%</span>
            </div>
            <div class="example-progress__item">
              <t-progress percentage="50" track-color="#bfc6cc" color="#f84c55">
                <template #label>
                  <span style="color: silver; font-size: 12px">剩余10k件</span>
                </template>
              </t-progress>
            </div>
            <div class="buy-item-text3">
              <div class="bu-p">
                <span>￥</span><span class="bu-price">558.0</span>
              </div>
              <div class="bu-bt"><button class="butt">去抢购</button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import "./index.css";
import Carousel from "../../components/swiper.vue";
import { ref } from "vue";
const customPercentage = ref(88);
const son = ref([
  {
    img: "../../../public/image/bj1.png",
    text: "送长辈",
    text2: "SEND ELDER",
    text3: "脉脉温意情相伴",
  },
  {
    img: "../../../public/image/bj2.png",
    text: "送朋友",
    text2: "SEND FRIEND",
    text3: "许久相遇如初见",
  },
]);
const rank = ref([
  {
    icon: "../../../public/image/热销-火焰.png",
    text: "热销榜单",
    cent: "热销9.8万束",
    img: "../../../public/image/bd1.png",
  },
  {
    icon: "../../../public/image/特价1.png",
    text: "特价专区",
    cent: "韩式系列",
    img: "../../../public/image/bd2.png",
  },
  {
    icon: "../../../public/image/新品.png",
    text: "新品来袭",
    cent: "小公主",
    img: "../../../public/image/bd3.png",
  },
]);
const notice = ref([
  { not: "资讯", text: "【版本更新】Flower Buy官网更新公告" },
  { not: "动态", text: "【招商加盟】鲜花店饿了么外卖品牌加盟…" },
]);
const grid = ref([
  { text: "玫瑰", image: "../../../public/image/玫瑰花.png" },
  { text: "康乃馨", image: "../../../public/image/康乃馨.png" },
  { text: "百合", image: "../../../public/image/beans.png" },
  { text: "菊花", image: "../../../public/image/菊花-copy.png" },
  { text: "绣球花", image: "../../../public/image/绣球花.png" },
  { text: "洋桔梗", image: "../../../public/image/花花.png" },
  { text: "草花", image: "../../../public/image/Bunch Flowers.png" },
  { text: "配花", image: "../../../public/image/Bunch Flowers.png" },
  { text: "配叶", image: "../../../public/image/beans.png" },
  {
    text: "自选大厅",
    image: "../../../public/image/自选.png",
    path: "/choose",
  },
]);
</script>

<style scoped lang="scss"></style>
